

<style>
.roleManage .roleManageTable{
  width: 100%;
  border: none;
  line-height: 40px;
  text-align: left;
  font-size: 12px;
  color: #777;
  border-collapse: collapse;
}
.roleManage .roleManageTable th:first-child,.roleManage .roleManageTable td:first-child{
    width: 50px;
}
.roleManage .roleManageTable th:last-child,.roleManage .roleManageTable td:last-child{
  width: 100px;
  text-align: center;
  padding-right: 20px;
}
.roleManage .roleManageTable td{
  border: none;
  border-bottom: 1px solid #ccc;
}
.roleManage .roleManageTable a {
  color: #777;
}
</style>

<div class="roleManage">
  <table class="roleManageTable">
    <thead>
      <th>序号</th>
      <th>角色名称</th>
      <th>授权</th>
    </thead>
    <tbody>
      <td>序号</td>
      <td>角色名称</td>
      <td>授权</td>
    </tbody>
  </table>
</div>


<script>
  myAjax.get(api.ROLE_FINDALL).then((res)=>{
    //清空节点
    $(".roleManage tbody").empty();
    console.log(res)
    let arr=res.data;
    if(arr.length>0){
      arr.forEach((item,index)=>{
        $(".roleManage tbody").append($(`
        <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>
          <a href="#">移除</a>
          <a href="#">授权</a>
          <a href="#">修改</a>
        </td>
      </tr>`))
      })
    }
  })
</script>